/* intersection Observer API */
.container {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  margin-bottom: 10px;
}
.wrapper1 {
  width: 100%;
  height: 1700px;
}
.wrapper2 {
  width: 100%;
  height: 1000px;
}
.sampleBoxGroup1 {
  margin-top: 500px;
  position: relative;
}
.sampleBox {
  width: 150px;
  height: 200px;
  background-color: rgb(245, 170, 140);
  border: 2px solid rgb(201, 126, 17);
  position: relative;
  margin: 5px 0 5px -75px;
  left: 50%;
}
.label {
    font: 14px "Open Sans", "Arial", sans-serif;
    position: absolute;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 3em;
    height: 18px;
    padding: 2px;
    text-align: center;
}
.label.lefttop {
  left: 2px;
  top: 2px;
}
.label.leftbottom {
    left: 2px;
    bottom: 2px;
}
.label.righttop {
    right: 2px;
    top: 2px;
}
.label.rightbottom {
    right: 2px;
    bottom: 2px;
}

.sampleBoxTwo {
    background-color: hsl(0, 100%, 50%);
    border: 4px solid rgb(20, 20, 120);
    transition: background-color 1s, border 1s;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font: 32px "Arial";
    color: white;
}